<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础信息' },
          { name: 'box-node', title: '节点配置' },
          { name: 'box-button', title: '按钮配置' },
        ]"
      />
    </div>

    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <div id="box-base" class="box-title">基础信息</div>
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <customFormItem label="标志" name="code" :parent="_self" :form="form" />
          <customFormItem label="名称" name="name" :parent="_self" :form="form" />
          <customFormItem label="状态字段" name="fieldName" :parent="_self" :form="form" />
          <customFormItem label="禁用" name="flagDisable" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          help="禁用后该流程将无法使用"
                          :config="{flagValueBoolean: false}"/>
          <customFormItem label="备注" name="remark" :parent="_self" :form="form" :type="constCommon.formItemType.textarea.name"/>
        </template>
      </customForm>

      <div id="box-node" class="box-title">节点配置</div>
      <div>
        <div class="row-box-left">
          <data-view v-show="propStatus==='edit'"
            propViewKey="v_flow_node"
            propViewForm="sys/flow/flow-node.vue"
            :propInitData="form"
            ref="dvNode"
            @current-change="currentChange"
            @after-load="afterLoad"
            :propCustomCols="[{name: 'color', cmode: 'edit'}]" :propAutoFetchData="false"
            :propIsTdesign="true"
          />
        </div>
        <div  class="row-box-right">
          <h3>
            角色设置
            <customButton title="保存" theme="primary" size="small" @click="saveRoleCheckNode('node')" :disabled="!currentRowNode.id" help="保存角色设置"  helpDisabled="请先选择左侧数据" style="float: right"/>
          </h3>
          <customCheckbox
            name="roleCheckNode"
            label="关联角色"
            :parent="_self"
            :isInnerForm="false"
            v-model="roleCheckNode"
            :options="roleList"
            fullItem
            class="row-box-right-box"
            v-show="currentRowNode.id"
          />
          <h5 v-show="!currentRowNode.id">请先选择左侧数据</h5>
        </div>
      </div>

      <div id="box-button" class="box-title">按钮配置</div>
      <div>
        <div class="row-box-left">
          <data-view v-show="propStatus==='edit'"
            propViewKey="v_flow_button"
            propViewForm="sys/flow/flow-button.vue"
            :propInitData="form"
            :propSubHeight="150"
            ref="dvButton"
            :propAutoFetchData="false"
            @current-change="currentChange"
            @after-load="afterLoad"
            :propIsTdesign="true"
          />
        </div>
        <div  class="row-box-right">
          <h3>
            角色设置
            <customButton title="保存" theme="primary" size="small" @click="saveRoleCheckNode('button')" :disabled="!currentRowButton.id" help="保存角色设置"  helpDisabled="请先选择左侧数据" style="float: right"/>
          </h3>
          <customCheckbox
            name="roleCheckButton"
            label="关联角色"
            :parent="_self"
            :isInnerForm="false"
            v-model="roleCheckButton"
            :options="roleList"
            fullItem
            class="row-box-right-box"
            v-show="currentRowButton.id"
          />
          <h5 v-show="!currentRowButton.id">请先选择左侧数据</h5>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  data() {
    return {
      form: {},
      viewData: {},
      // 角色列表
      roleList: [],

      // 按钮行
      currentRowNode: {},
      // 按钮行 角色清单
      roleCheckNode: [],

      // 节点行
      currentRowButton: {},
      // 节点行 角色清单
      roleCheckButton: [],
    }
  },
  methods: {
    getChildViewQueryWrapper() {
      if (this.form.id) {
        return this.$newWrapper().eq('flowId', this.form.id)
      } else {
        return this.$newWrapper().ne('1', 1)
      }
    },

    // 获取角色列表
    getRoleList() {
      this.$ajax.get('/role/list', {}).then(res => {
        if (res.code == 0) {
          this.roleList = res.data.map( item => {
            return {
              value: item.code,
              label: item.name
            }
          })
        }
      })
    },

    // 行改变
    currentChange(param) {
      if (param.viewKey == 'v_flow_node'){
        this.currentRowNode = param.row.row
        this.roleCheckNode = []
        if (this.currentRowNode && this.currentRowNode.roleCodes && this.currentRowNode.roleCodes.length > 0) {
          this.roleCheckNode = this.currentRowNode.roleCodes
        }
        return true
      }
      if (param.viewKey == 'v_flow_button'){
        this.currentRowButton = param.row.row
        this.roleCheckButton = []
        if (this.currentRowButton && this.currentRowButton.roleCodes && this.currentRowButton.roleCodes.length > 0) {
          this.roleCheckButton = this.currentRowButton.roleCodes
        }
        return true
      }
    },

    // 保存角色设置
    saveRoleCheckNode(type) {
      if (type == 'node'){
        this.utilVue.loadShow(true)
        this.currentRowNode.roleCodes = this.roleCheckNode
        this.$ajax.post('/flownode/save', this.currentRowNode).then(response => {
          this.utilMessage.success('保存成功！')
          this.utilVue.loadHide()
        })
        return true
      }
      if (type == 'button'){
        this.utilVue.loadShow(true)
        this.currentRowButton.roleCodes = this.roleCheckButton
        this.$ajax.post('flow_button/save', this.currentRowButton).then(response => {
          this.utilMessage.success('保存成功！')
          this.utilVue.loadHide()
        })
        return true
      }
    },

    // 数据加载后
    afterLoad(rows, viewKey) {
      if (viewKey == 'v_flow_node'){
        this.roleCheckNode = []
        this.currentRowNode = {}
      }
      if (viewKey == 'v_flow_button'){
        this.roleCheckButton = []
        this.currentRowButton = {}
      }
    }
  },
  created() {
    let that = this
    this.getRoleList()
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterSave: () => {

      },
      afterClick(button, data) {
        let {key: buttonKey} = button
        if (buttonKey == 'copy') { //复制
          let {code: flowKey} = data
          that.$confirm('此操作将复制一个流程副本, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            that.$ajax.post('/flow/copy', {flowKey}).then(resp => {
              if (resp.success) {
                that.utilMessage.success(resp.msg)
                that.$emit('refresh-grid')
                that.$set(that.propParent, 'viewFormVisible', false)
              } else {
                that.utilMessage.error(resp.msg)
              }
            })
          }).catch(() => {})
        }
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.$set(this.form, 'flagDisable', this.form.flagDisable == undefined ? false : this.form.flagDisable)

        let wrapper = this.getChildViewQueryWrapper()
        this.$refs.dvNode && this.$refs.dvNode.setQueryWrapper(wrapper)
        this.$refs.dvButton && this.$refs.dvButton.setQueryWrapper(wrapper)
      },
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object
  },
  components: {
    customAnchor
  },
  computed: {
  },

  watch: {
    propCurrentRow: {
      immediate: true,
      handler(newValue) {
      }
    },
    roleTreeFilter(val) {
      this.$refs.roleTree.filter(val)
    },
    userTreeFilter(val) {
      this.$refs.userTree.filter(val)
    }
  }
}
</script>

<style lang="scss" scoped>
  .row-box-left,.row-box-right {
    display: inline-block;
  }
  .row-box-left{
    width: calc(100% - 200px);
  }
  .row-box-right {
    width: 200px;
    vertical-align: top;
    padding: 0px 10px;
    .row-box-right-box{
      margin-top: 12px;
      max-height: 237px;
      overflow: auto;
    }
  }
</style>
